<template>
  <view>
    <uni-nav-bar backgroundColor="linear-gradient(0deg, #597EF7 100%, #2F54EB 0%) !important"
                 color="#FFFFFF" title="设备管理" left-icon="back" @clickLeft="goBack">
    </uni-nav-bar>
    <uv-grid align="left" :border="false">
      <uv-grid-item
          :customStyle="{ padding: '10px' }"
          v-for="(item, index) in baseList"
          :key="index"
          @click="handleClick(item)"
      >
        <image
            style="width: 60px; height: 60px"
            :src="item.icon"
        >
        </image>
        <text>{{ item.title }}</text>
      </uv-grid-item>
    </uv-grid>
  </view>
</template>
<script>
  import $mqttTool from '@/utils/mqttTools.js';
export default {
  data() {
    return {
      baseList: [
        {
          id: 0,
          icon: '/static/icon/sssj.png',
          title: '实时数据',
          info: '123',
        },
        {
          id: 1,
          icon: '/static/icon/ssqx.png',
          title: '实时曲线',
          info: '123',
        },
        {
          id: 2,
          icon: '/static/icon/lssj.png',
          title: '历史数据  ',
          info: '123',
        }, {
          id: 4,
          icon: '/static/icon/cssz.png',
          title: '参数设置',
          info: '123',
        }, {
          id: 5,
          icon: '/static/icon/ztqh.png',
          title: '状态切换',
          info: '123',
        }, {
          id: 0,
          icon: '/static/icon/ljxf.png',
          title: '立即续费',
          info: '123',
        }, {
          id: 0,
          icon: '/static/icon/bdsj.png',
          title: '绑定手机',
          info: '123',
        }, {
          id: 0,
          icon: '/static/icon/qdfw.png',
          title: '启动服务',
          info: '123',
        }, {
          id: 3,
          icon: '/static/icon/bjsz.png',
          title: '报警设置',
          info: '123',
        }, {
          id: 0,
          icon: '/static/icon/sms.png',
          title: '说明书',
          info: '123',
        }, {
          id: 0,
          icon: '/static/icon/ckxx.png',
          title: '查看信息',
          info: '123',
        },
      ],
      num: 0,
      message: '',
    }
  },
  methods: {
    handleClick(item) {
      console.log(item);
      uni.navigateTo({
        url: '/pages/device/manager-tab?' + 'id=' + item.id,
      });
    },
    /* Mqtt回调处理  */
    mqttCallback() {
      $mqttTool.client.on('message', (topic, message, buffer) => {
        let topics = topic.split('/');
        let productId = topics[1];
        let deviceNum = topics[2];
        message = JSON.parse(message.toString());
        if (topics[3] === 'status') {
          console.log('接收到【设备状态-详情】主题：', topic);
          console.log('接收到【设备状态-详情】内容：', message);
          // 更新列表中设备的状态
          if (this.form.serialNumber === deviceNum) {
            this.oldDeviceStatus = message.status;
            this.form.status = message.status;
            this.form.isShadow = message.isShadow;
            this.form.rssid = message.rssid;
          }
        }
      });
    },
    /** Mqtt订阅主题 */
    mqttSubscribe(device) {
      // 订阅当前设备状态和实时监测
      let topicStatus = '/' + device.productId + '/' + device.serialNumber + '/status/post';
      let topicProperty = '/' + device.productId + '/' + device.serialNumber + '/property/post';
      let topicFunction = '/' + device.productId + '/' + device.serialNumber + '/function/post';
      let topics = [];
      topics.push(topicStatus);
      topics.push(topicProperty);
      topics.push(topicFunction);
      $mqttTool.subscribe(topics);
    },
    /** Mqtt取消订阅主题 */
    mqttUnSubscribe(device) {
      // 订阅当前设备状态和实时监测
      let topicStatus = '/' + device.productId + '/' + device.serialNumber + '/status/post';
      let topicProperty = '/' + device.productId + '/' + device.serialNumber + '/property/post';
      let topicFunction = '/' + device.productId + '/' + device.serialNumber + '/function/post';
      let topics = [];
      topics.push(topicStatus);
      topics.push(topicProperty);
      topics.push(topicFunction);
      console.log('取消订阅', topics);
      $mqttTool.unsubscribe(topics);
    },
    goBack() {
      uni.navigateBack()
    }

  },
  onLoad() {
    if ($mqttTool.client == null) {
      $mqttTool.connect();
    }
    this.mqttCallback();
  }
}
</script>


<style scoped lang="scss">

</style>
